<template>
  <div class="mine">
    <el-card class="ddd">
      <div class="box-card">
        <div class="first">
          <el-image :src="user.image" class="image"/>
        </div>
        <div class="second">
          <!--          <div class="font-size">学校: {{user.education}}</div>-->
          <div class="font-size">学号: {{user.userId}}</div>
          <div class="font-size">姓名: {{user.name}}</div>
          <div class="font-size">院系: {{clazz.collegeName}}</div>
          <div class="font-size">班级: {{clazz.name}}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import user from "../../utils/user"
  import {GetClazz} from "../../api/index"

  export default {
    name: "mine",
    data() {
      return {
        user: {},
        image: "",
        clazz: this.$store.state.clazz,
      }
    },
    methods: {
      getUser() {
        this.user = this.$store.state.user;
        this.image = user.user.image;
        // console.log(this.user);
        this.getClass(this.user.classId)
      },
      async getClass(clazzId) {
        await GetClazz({clazzId: clazzId}).then((res) => {
          // console.log(res);
        }).catch((err) => {
          console.log(err);
        })
      }
    },
    created() {
      this.getUser()
      // console.log(this.$store.state.clazz);
    }
  }
</script>

<style scoped>
  .mine {
    margin: auto;
    margin-top: 10%;
    width: 50%;
  }

  .font-size {
    font-size: 60px;
    margin-bottom: 5%;
  }

  .box-card {
    display: flex;
    flex-direction: row;
  }

  .first, .second {
    width: 50%;
  }

  .image {
    width: 70%;
    height: 63%;
  }

  @media screen and (max-width: 768px) {
    .ddd {
      width: 200%;
      margin-left: -50%;
      height: 220px;
    }

    .font-size {
      font-size: 20px;
      margin-bottom: 10%;
    }

    .first {
      width: 50%;
    }

    .second {
      margin-left: 5%;
      width: 40%;
    }
  }


  @media screen and (max-width: 614px) and (min-width: 500px) {
    .ddd {
      width: 200%;
      margin-left: -50%;
      height: 350px;
    }
  }

  @media screen and (max-width: 1080px) and (min-width: 768px) {
    .ddd {
      width: 200%;
      margin-left: -50%;
      height: 300px;
    }

    .font-size {
      font-size: 20px;
      margin-bottom: 10%;
    }

    .first {
      width: 50%;
    }

    .second {
      margin-left: 5%;
      width: 40%;
    }
  }

  @media screen and (min-width: 1080px) and (max-width: 1800px) {
    .ddd {
      width: 100%;
      margin-left: 5%;
      height: 300px;
    }

    .font-size {
      font-size: 30px;
      margin-bottom: 10%;
    }

    .first {
      width: 50%;
    }

    .second {
      margin-left: 2%;
      width: 40%;
    }
  }

  @media screen and (min-width: 1800px) {
    .ddd {
      width: 100%;
      margin-left: 5%;
      height: 380px;
    }

    .font-size {
      font-size: 36px;
      margin-bottom: 10%;
    }

    .first {
      width: 50%;
    }

    .second {
      margin-left: 2%;
      width: 40%;
    }
  }

</style>
